<template>
  <div class="forecastPlan">
    <TitleColumn name="测站统计" isColumn />
    <div class="content">
      <StationStatistics />
      <div class="forecastPlanDetails">
        <IrrigationInfo />
        <DispatchStatistics />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import TitleColumn from "@/components/TitleColumn";
import StationStatistics from "./StationStatistics/index.vue";
import IrrigationInfo from "./IrrigationInfo/index.vue";
import DispatchStatistics from "./DispatchStatistics/index.vue";

defineOptions({ name: "ForecastPlan" });

const state = reactive({
  name: "vue3",
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.forecastPlan {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-row-gap: 10px;
  box-sizing: border-box;
  .content {
    width: 340px;
    height: 100%;
    overflow: hidden;
    position: relative;
    .forecastPlanDetails {
      position: fixed;
      top: 10px;
      right: -390px;
      width: 380px;
      height: 100%;
      display: grid;
      grid-template-rows: minmax(520px, 54%) minmax(420px, 46%);
      grid-row-gap: 10px;
    }
  }
}
</style>
